<template>
	<Container>
		<view class="header">
			<view hover-class="touch" hover-stay-time="300" @tap="tap" :class="{ tapColor: isComplete }">{{ assignment.comparedArticle.name }}</view>
			<AudioIcon @iconTap="iconTap" :questionPress="questionPress" />
		</view>
		<Question :question="assignment.questionName" />
	</Container>
</template>

<script>
import { mixins } from '../../../common/mixins/assignmentDefault.js'
import AudioIcon from '../audioIcon.vue'
import Question from '../questionName.vue'
import Container from '../container.vue'
export default {
	mixins: [mixins],
	components: { AudioIcon, Question, Container },
	data() {
		return {
			current: 0,
			isStart: false,
			timer: null
		}
	},
	beforeDestroy() {
		clearTimeout(this.timer)
	},
	methods: {
		tap: function() {
			if (this.isComplete || this.questionPress) return
			clearTimeout(this.timer)
			this.touchAudio()
			this.questionPause()
			this.isComplete = true
			const optionArticles = this.assignment.optionArticles
			this.chooses.push(optionArticles[this.current].isMatched)
			if (this.current === optionArticles.length - 1) {
				this.isSure()
				return
			}
			const timer = setTimeout(() => {
				this.current++
				this.isComplete = false
				this.questionPlay()
			}, 1000)
			this.$once('hook:beforeDestory', function() {
				clearTimeout(timer)
			})
		},
		questionPlay: async function() {
			clearTimeout(this.timer)
			const text = this.isStart ? this.assignment.optionArticles[this.current].audioText : this.assignment.comparedArticle.audioText
			const speaker = this.assignment.comparedArticle.speaker ? this.assignment.comparedArticle.speaker : null
			const data = await this.parseTextAudio({
				text: text,
				speaker: speaker
			})
			this.dialogueAudio({
				src: data,
				start: () => {
					this.questionPress = true
				},
				end: () => {
					this.questionPress = false
					if (!this.isStart) {
						this.isStart = true
						this.questionPlay()
						return
					}
					this.timer = setTimeout(() => {
						if (this.current === this.assignment.optionArticles.length - 1) {
							this.isSure()
							return
						}
						this.current++
						this.chooses.push(false)
						this.questionPlay()
					}, 1500)
				}
			})
		},
		isSure: function() {
			const isMatcheds = this.assignment.optionArticles.map(item => {
				return item.isMatched
			})
			this.$parent.next({
				isSure: isMatcheds.toString() === this.chooses.toString()
			})
		}
	}
}
</script>

<style scoped lang="stylus">
.header
	height 65vh
	width 720rpx
	max-width 65vh
	border-radius 70rpx
	border 12rpx solid #FCC77D
	box-sizing border-box
	margin 3vh 0
	position relative
	display flex
	justify-content center
	align-items center
	view
		width 40vh
		height 40vh
		transition all 0.3s
		font-size 40vh
		color black
		filter drop-shadow(5rpx 5rpx 5rpx #c4c4c4)
		-webkit-text-stroke 10rpx white
		font-weight 600
		text-align center
.tapColor
	color #FF7053 !important
</style>
